<template>
  <div class="shendu_contenter">
    <el-card>
      <el-row type="flex" justify="space-between">
        <span class="fonts">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-edit"
          @click="$router.push('/tiku_shiti')"
          >新增试题</el-button
        >
      </el-row>
      <!-- 表单 -->
      <el-form :inline="true">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="　　学科" size="small">
              <el-select
                v-model="chaxun.subjectID"
                placeholder="请选择"
                style="width: 300px"
                @focus="getSubjectList"
                @change="changeXueke"
              >
                <el-option
                  v-for="item in subject"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目录" size="small">
              <el-select
                v-model="shijianhui"
                placeholder="请选择"
                style="width: 300px"
              >
                <el-option
                  v-for="item in DirectorysList"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="small">
              <el-select
                v-model="shiwoer"
                placeholder="请选择"
                style="width: 300px"
              >
                <el-option
                  v-for="item in TagList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" size="small">
              <el-input
                placeholder="请输入关键字"
                v-model="chaxun.keyword"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型" size="small">
              <el-select
                v-model="chaxun.questionType"
                placeholder="请选择"
                style="width: 300px"
              >
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="small">
              <el-select
                v-model="chaxun.difficulty"
                placeholder="请选择"
                style="width: 300px"
              >
                <el-option
                  v-for="item in difficultyList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="small">
              <el-select
                v-model="value"
                placeholder="请选择"
                style="width: 300px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" size="small">
              <el-select
                v-model="chaxun.creatorID"
                placeholder="请选择"
                style="width: 300px"
                @focus="getUser"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注" size="small">
              <el-input placeholder="" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="简称" size="small">
              <el-input placeholder="" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                placeholder="请选择"
                size="small"
                style="width: 90px; margin-right: 10px"
                v-model="chaxun.province"
                @change="changeFn"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                size="small"
                style="width: 90px"
                v-model="chaxun.city"
              >
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" size="small">
              <el-row :gutter="10" style="margin-left: 250px">
                <el-button type="" @click="close">清除</el-button>
                <el-button type="primary" @click="searchFn">搜索</el-button>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <template>
        <el-tabs type="card">
          <el-tab-pane label="全部">
            <div slot="label" @click="TabState()">全部</div>
          </el-tab-pane>
          <el-tab-pane label="待审核">
            <div slot="label" @click="TabState(0)">待审核</div>
          </el-tab-pane>
          <el-tab-pane label="已审核">
            <div slot="label" @click="TabState(1)">已审核</div>
          </el-tab-pane>
          <el-tab-pane label="已拒绝">
            <div slot="label" @click="TabState(2)">已拒绝</div>
          </el-tab-pane>
        </el-tabs>
        <el-alert :closable="false" :title="`数据一共${count}条`" type="info">
        </el-alert>
        <!-- 表格 -->
        <tableItem
          ref="table"
          @updateList="initData"
          v-loading="loading"
        ></tableItem>
        <el-row type="flex" justify="end">
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="chaxun.page"
            :page-sizes="[5, 6, 7]"
            :page-size="chaxun.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </el-row>
      </template>
    </el-card>
  </div>
</template>

<script>
import {
  getQuerstionsList,
  getXuekeListApi,
  getTagsList,
  getDirectorys,
  getBackUserListApi,
} from "@/api/Questions";
import { getTagsListApi } from "@/api/Tags";
import { getMuluListApi } from "@/api/Mulu";
import { getXuekeInfoApi } from "@/api/Xueke";
import { provinces, citys } from "@/api/citys";
import tableItem from "./components/tableItem.vue";
export default {
  components: {
    tableItem,
  },
  data() {
    return {
      provincesList: provinces(),
      citysList: [],
      // 目录
      questionTypeList: [
        { id: "1", name: "单选" },
        { id: "2", name: "多选" },
        { id: "3", name: "简答" },
      ],
      difficultyList: [
        { id: "1", value: "简单" },
        { id: "2", value: "一般" },
        { id: "3", value: "困难" },
      ],
      directionList: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      chaxun: {
        page: 1,
        pagesize: 5,
      },
      count: 0,
      loading: false,
      subject: [], //学科列表
      TagList: [], //标签列表
      DirectorysList: [],
      userList: [],
      shijianhui: "",
      shiwoer: "",
    };
  },
  methods: {
    searchFn() {
      this.chaxun.page = 1;
      this.initData();
      this.chaxun.keyword = "";
    },
    changeFn() {
      // 获取地区赋值给本地
      this.citysList = citys(this.chaxun.province);
    },
    //获取用户列表
    async getUser() {
      try {
        const { list } = await getBackUserListApi({
          page: 1,
          pagesize: 100,
          disabled: 0,
          username: "",
        });
        this.userList = list;
        console.log(res);
      } catch (error) {
        console.log(error);
      }
    },
    //清除
    close() {
      this.chaxun = {
        page: 1,
        pagesize: 5,
      };
      this.shijianhui = "";
      this.shiwoer = "";
      this.subject = [];
      this.TagList = []; //标签列表
      this.DirectorysList = [];
      this.userList = [];
      this.chaxun.provinces = "";
      this.citysList = [];
      this.initData();
    },
    //获取学科列表
    async getSubjectList() {
      const { items } = await getXuekeListApi({
        page: 1,
        pagesize: 100,
      });
      this.subject = items;
    },
    //监听学科选中的
    async changeXueke(val) {
      //x学科切换了清空表单
      this.TagList = []; //标签列表
      this.DirectorysList = [];
      this.shijianhui = "";
      this.shiwoer = "";
      // console.log(val);
      //根据选中学科id获取目录表单
      const res = await getMuluListApi({
        subjectID: val,
      });
      //若没获取到，回个空数组
      if (res.items.length === 0) return (this.DirectorysList = []);
      this.DirectorysList = res.items;
      const res2 = await getTagsListApi({
        subjectID: val,
      });
      if (res.items.length === 0) return (this.TagList = []);
      this.TagList = res2.items;
    },
    //tabs点击不同按钮切换不同状态
    async TabState(val) {
      //回调页码
      this.chaxun = {
        page: 1,
        pagesize: 5,
      };
      this.chaxun.chkState = val;
      await this.initData();
    },
    //基础列表
    async initData() {
      try {
        this.loading = true;
        const { counts, items } = await getQuerstionsList(this.chaxun);
        this.$refs.table.list = items;
        this.count = counts;
        // console.log(res, "获取数据");
      } catch (error) {
        console.log(error);
        this.$message.warning("拉取失败请重试");
      }
      this.loading = false;
    },
    //分页器条数发生变化
    async handleSizeChange(val) {
      // console.log(val);
      this.chaxun.pagesize = val;
      await this.initData();
    },
    //分页器页数变化
    async handleCurrentChange(val) {
      this.chaxun.page = val;
      await this.initData();
    },
  },
  created() {
    this.initData();
  },
  //因为前面处理三个关联下拉框清空数据会造成v-model绑定不上，所以定义了中间值用于绑定
  watch: {
    shijianhui(val) {
      this.chaxun.catalogID = val;
    },
    shiwoer(val) {
      this.chaxun.tags = val;
    },
  },
};
</script>

<style scoped lang="scss">
.shendu_contenter {
  padding-top: 18px;
  .fonts {
    font-size: 12px;
    color: pink;
  }
  .el-row {
    // margin-bottom: 20px;
    &:last-child {
      margin-top: 20px;
      margin-bottom: 0;
    }
    &:first-child {
      margin-bottom: 20px;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-form-item__label {
    font-weight: 700 !important;
  }
  :v-deep label {
    font-weight: 700 !important;
  }
}
</style>